<template>
	<div class="html_a">	
		<div class="header">
			<van-nav-bar
			  class="header"	
			  left-arrow
			  @click-left="onClickLeft"
			  sticky
			>			
				<van-icon name="arrow-left" slot="left" color="#333"  size="20"/>
				<div slot="title">填写物流信息</div>	
			</van-nav-bar>			
		</div>
		
		<div class="body">
			<div class="wrap1">
			    <div class="header">
			      <div class="img" :style="{backgroundImage: 'url(' + data.goodsImage + ')'}">
			      	
			      </div>
			      <div class="detail">
			      	 <div class="title">{{data.comName}}</div>
			      	 <div class="number">数量:{{data.goodsCount}}</div>
			      </div>
			    </div>						
			</div>

			<div class="wrap2" >
				<div style="position: relative;" @click="showExpress=true">
					<van-field
					  :placeholder="placeholder.company"
					  input-align="right"
					  readonly				
					> 
					<div slot="label">
						<span style="color: #F12613;">*</span>
						<span>物流公司：</span>
					</div>			
					</van-field>
					<div >
						<img src="../../../../static/img/lanhu2/14.png" alt="" class="icon"/>
					</div>
				</div>

				<div v-if="params.companyId==0">
					<van-field
					  v-model="params.company"
					  placeholder="请填写"
					  input-align="right"	
					  label-width="120"
					> 
					<div slot="label">
						<span style="color: #F12613;">*</span>
						<span>物流公司名称：</span>
					</div>			
					</van-field>
				</div>	
				
				<div style="position: relative;" v-if="params.companyId==0" @click="showType=true">
					<van-field
					  :placeholder="placeholder.type"
					  input-align="right"
					  readonly				
					> 
					<div slot="label">
						<span style="color: #F12613;">*</span>
						<span>物流方式：</span>
					</div>			
					</van-field>
					<div >
						<img src="../../../../static/img/lanhu2/14.png" alt="" class="icon"/>
					</div>
				</div>			
				
				
				<div>
					<van-field
					  v-model="params.expressNo"
					  placeholder="请填写物流单号"
					  input-align="right"	
					  label-width="120"
					> 
					<div slot="label">
						<span style="color: #F12613;">*</span>
						<span>物流单号：</span>
					</div>			
					</van-field>
				</div>
	
				<div>
					<van-field
					  v-model="params.addressMobile"
					  placeholder="填写手机号码便于买家联系你"
					  input-align="right"	
					> 
					<div slot="label">
						<span style="color: #F12613;">*</span>
						<span>手机号码：</span>
					</div>			
					</van-field>
				</div>
	
				<div>
					<van-field
					  v-model="params.expressDetail"
					  placeholder="不超过200字"
					  input-align="right"	
					> 
					<div slot="label">
						<span style="color: #fff;">*</span>
						<span>备注说明：</span>
					</div>			
					</van-field>
				</div>
			</div>
		



	        <div class="wrap3" >
	        	<div class="title">上传凭证</div>
				<div class="imgList">
					<div v-for="(item,index) in imgList" class="imgContain" :key="index">
						<div class="clear" @click="delImg(index)">
							<img src="../../../../static/img/lanhu/43.png" alt="" style="width: 13px;height: 13px;"/>
						</div>
						<img :src="item" alt=""/>
					</div>
					
		            <div v-if="imgList.length<6" @click="getImgUrl(imgList.length,6)" class="imgContain">
		            	<img src="../../../../static/img/lanhu2/02.png" alt=""/>
		            </div>
				</div>	
			</div>
			
		</div>
			
        <div class="foot">
            <van-button class="footBtn"  block :loading="loading" @click="confirm">提交发货信息</van-button>        	
        </div>

		<!--物流公司选择弹框-->
		<van-popup
		  v-model="showExpress"
		  position="right"
		  :style="{ height: '100%',width:'100%' }"
		  :overlay="false"
		>
			<van-nav-bar
			  title="选择物流公司"
			  left-arrow
			>		
			  <van-icon name="arrow-left" slot="left" color="#000" size="20" @click="showExpress=false"/>
		   </van-nav-bar>		
		   
		   
		   
	       <div class="express_list">
	       	   <div class="li" v-for="(item,index) in expressList" :key="index" @click="changeExpress(item,index)">
	       	   	 <span>{{item.expressName}}</span>
	       	   	 <span v-if="item.isShow"><img src="../../../../static/img/lanhu/85.png" alt="" style="width: 15px;"/></span>
	       	   </div>
	       </div>
		</van-popup>

		
	    <!--物流方式-->
		<van-popup
		  v-model="showType"
		  position="bottom"
		  :style="{ height: '50%' }"
		  class="popup"
		>
		    <div class="popup_title">选择物流方式</div>		   
		    <div class="popup_wrap">
		    	<div class="selectWrap" @click="params.expressType=1">
		    		<div class="section2">快递</div>
		    		<div class="section3">	    			
		    			<img src="../../../../static/img/lanhu/74.png" alt="" v-if="params.expressType==1"/>
		    			<img src="../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>
		    	<div class="selectWrap" @click="params.expressType=0">
		    		<div class="section2">平邮</div>
		    		<div class="section3">
		    			<img src="../../../../static/img/lanhu/74.png" alt="" v-if="params.expressType==0"/>
		    			<img src="../../../../static/img/lanhu/73.png" alt="" v-else/>
		    		</div>
		    	</div>	   	 
		    </div>	
		    
		    <div class="popup_btn">		    	
		    	<van-button  color="#FFD630" block @click="confirmType">确认</van-button>
		    </div>			    
		</van-popup>
	</div>	
</template>

<script>	
import '@/assets/reset/input.css'
import Floor53 from '_c/market/floor/floor53.vue'	
import {getFun} from '@/api/publicFun.js'	
let publicFun=getFun()	
export default {	
	components: {
	   Floor53
	},	
	data() {
       return {
       	 showType:false,
       	 url1:this.$api+'/marketorderservice/api/v1/market/orders/selectExpressList', // 获取物流公司列表
       	 url2:this.$api+'/marketorderservice/api/v1/market/orders/addOrdersExpressInfo',
       	 url3:this.$api+'/marketorderservice/api/v1/market/orders', // 根据订单ID 请求商品详情
       	 showAddressList:false,
       	 showExpress:false,
       	 expressList:[],  // 记录快递公司列表       	 
       	 loading:false,
       	 data:{},
       	 placeholder:{
       	 	company:'请选择物流公司', 
       	 	type:'快递'
       	 },
       	 params:{
       	 	companyId :-1,  // 物流公司ID 0 为 其他 自定义物流公司
       	 	company:'',     // 自定义物流公司名称
       	 	ordersId:'',    // 订单号
       	 	expressNo:'',   // 物流编号
       	 	addressMobile:'', // 收件人手机号
       	 	expressDetail:'', // 备注说明
       	 	expressType:1,  // 自定义物流公司时的物流方式 默认为1快递
       	 	expressImg:'',  //  凭证图片
       	 	userId:''
       	 },
       	 imgList:[],
       	 ordersId:'',      // 订单ID
       	 
       }
	},
	methods: {
	   // 获取物流公司接口	 
       getExpressList(){
       	  let that=this
       	  this.$Axios2.Post(this.url1,{expressState:1}).then(function(res){
       	  	for(var i=0;i<res.data.length;i++){
       	  		res.data[i].isShow=false
       	  		that.expressList.push(res.data[i])
       	  	}
       	  	let obj={
       	  		"expressName":'其他',
       	  		"expressId":0,
       	  		"isShow":false
       	  	}
       	  	that.expressList.push(obj)       	  	
       	  })       	
       },
		// 获取图片地址后的回调
	   callJSGetImgUrl(str){
		  this.imgList=this.imgList.concat(str.split(','))
		  this.params.expressImg=this.imgList.join()
	   }, 
		// 删除图片
	   delImg(index){
		  this.imgList.splice(index,1)
		  this.params.expressImg=this.imgList.join()
	   },		
	   // 选择物流
	   changeExpress(item,index){
	   	 for(var i=0;i<this.expressList.length;i++){
	   	 	if(i==index){
	   	 	   this.expressList[i].isShow=true	
	   	 	}else{
	   	 	   this.expressList[i].isShow=false
	   	 	}
	   	 }
	   	 this.params.companyId=item.expressId
	   	 this.placeholder.company=item.expressName
	   	 this.showExpress=false
	   }, 
	   // 选择类型
	   confirmType(){
	   	 if(this.params.expressType==1){
	   	 	this.placeholder.type='快递'
	   	 }else{
	   	 	this.placeholder.type='平邮'
	   	 }
	   	 this.showType=false
	   },
	   // 提交信息
	   confirm(){
	   	 if(this.params.companyId<0){
	   	 	this.$toast('请选择物流公司')
	   	 	return false
	   	 }
	   	 if(!this.params.expressNo){
	   	 	this.$toast('请输入物流单号')
	   	 	return false	   	 	
	   	 }
	   	 let reg = /^[0-9a-zA-Z]+$/
	   	 if(!reg.test(this.params.expressNo)){
	   	 	this.$toast('请输入正确的物流单号')
	   	 	return false	   	 	
	   	 }	   	 	   	 	   	 
	   	 if(this.params.companyId==0&&!this.params.company){
	   	 	this.$toast('选择其他物流情况下请输入物流公司名称')
	   	 	return false	 	   	 	
	   	 }
	   	 if(this.params.expressDetail.length>=200){
	   	 	this.$toast('备注说明不超过200字')
	   	 	return false	   	 	
	   	 }	   	 
	   	 if(this.params.expressDetail.length>=200){
	   	 	this.$toast('备注说明不超过200字')
	   	 	return false	   	 	
	   	 }	 
    	 if(!this.regTel(this.params.addressMobile)){
    		this.$toast('请输入正确的电话号码')
    		return false
    	 }  	   	 
       	 let that=this
       	 this.$Axios2.Post(this.url2,this.params).then(function(res){
       	 	let arg='[{"ordersId":"'+that.params.ordersId+'"},{"backType":"4"}]' 
		   	that.link('/market/orders/details',arg)              
         })      	 
	   },
	   getGoodsDetail(){
	   	 let that=this
	     that.$Axios2.Get(that.url3+'/'+that.params.ordersId+'/'+that.userId).then(function(res) {	
           that.data=res.data.orders
	     }) 	   	 
	   }
	},
	mixins:[publicFun],//混入		
	mounted() {
		this.params.ordersId=this.$router.currentRoute.query.ordersId;
		this.params.userId=this.$router.currentRoute.query.userId;
		this.getExpressList()	
		this.getGoodsDetail()
		window.callJSGetImgUrl=this.callJSGetImgUrl         // 挂载获取图片回调方法
	}
}	
</script>

<style scoped="" lang="scss">
.html_a{background: #f8f8f8;min-height: 100%;width: 100%;position: absolute;display: flex;flex-direction: column;
   .header{height: 44px;}
   .footer{height: 50px;}
   .body{flex: 1;}
}	
.van-cell{padding-left: 0;padding-right: 0;}
.wrap1{background: #fff;margin-top: 10px;padding: 20px;
  .header{display: flex;  
     .detail{margin-left: 10px;flex: 1;display: flex;flex-direction: column;justify-content: space-between;font-size: 12px;color: #999;
       .title{color: #333;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
     }  
  }	 
  .img{width: 50px;height: 50px;overflow: hidden;background-repeat: no-repeat;background-size:cover;background-position: 50% 50%;border-radius: 4px;}

}
.wrap2{background: #fff;margin-top: 10px;padding: 0 25px 0 20px;
  .icon{position: absolute;width: 6px;right: -12px;top: 50%;margin-top: -6px;display: block;}
}



.wrap3{padding: 20px;background: #fff;margin-top: 10px;
  .title{padding-bottom: 15px;}
  .imgContain{img{width: 80px;height: 80px;display: block;}}
  .imgList:after{content:"";display:block;clear:both;}
  .imgList .imgContain{float: left;margin-right: 3%;width:23.5%;margin-bottom: 10px;position: relative;}
  .imgList .imgContain img{width: 100%;height: 80px;}
  .imgList .imgContain:nth-child(3n){margin-right: 0;}
  .clear{position: absolute;right: -6px;top: -6px;z-index: 100;}  
}


.popup{
	.popup_title{font-size: 14px;padding: 21px;text-align: center;font-weight: 500;}	
	.popup_btn{position: absolute;bottom: 0;left: 0;width: 100%;}	
	.popup_wrap{margin-top: 10px;background: #fff;padding: 0 20px;
	 .selectWrap{padding: 15px 0;display: flex;align-items: center;border-bottom: 1px solid #f0f0f0;}
	 .selectWrap:nth-last-child(1){border:none}
	 .section3 img{width: 14px;display: block;}
	 .section2{flex: 1;}   
	}		
}


.express_list{margin-top: 10px;padding: 0 15px;
   .li{padding: 15px 0;border-bottom:1px solid #f0f0f0;font-size: 14px;display: flex;justify-content: space-between;}
}
.footBtn{background: #FFD630;
width: 100%;font-size: 16px;border:none;border-radius: none;}
</style>